<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小游戏的主页</title>
		<style type="text/css">
			*{margin: 10px;}
			#div{
				margin: 10px auto;
				background-repeat: no-repeat ;
				width: 500px;height: 500px;
				background-color: #B7B9B9;
			}
			#div span{
				font-size: 30px;
			}
			#div div{display: inline-block;} 
			#div div button{padding: 5px 10px;font-size: 16px;}
			#div .table span{font-size: 10px;}
			table{
				margin: 10px auto;
			}
			#file{
				border: 1px solid  #006DCC;
				width: 170px;
			}
		</style>
	</head>
	<body>
		<div id="div">
			<table class="table">
				<tr align="center">
					<td>请输入颜色</td>
					<td><input id="col" placeholder="只能输入英文或颜色代码!"/></td>
					<td><button id="col_btn">提交背景色</button></td>
				</tr>
				<tr align="center">
					<td>请输入文字</td>
					<td><input id="txt" title="输入打地鼠、推箱子、贪吃蛇、急速奔跑看看有什么效果"/></td>
					<td><button id="txt_btn">提交文字</button></td>
				</tr>
				<tr align="center">
					<td>添加背景图</td>
					<td><bdo dir="rtl">					
						<input id="file" type="file" title="只能输入相对位置" placeholder="可输入:../../img/navbg3.jpg">
					</bdo></td>
					<td><button id="back_img_btn">添加背景图片</button></td>
				</tr>
				<tr align="center">
					<td colspan="3">
						<span>注:可用键盘上、下、左、右键可控制背景图片的位置<br />用W、A、S、D控制背景大小</span>					
					</td>
				</tr>
			</table>			
		</div>			
	</body>
</html>
<script type="text/javascript">
//控制背景色
	$("col_btn").onclick=function(){
		var yanse=$("col").value;
			$("div").style.backgroundColor=yanse;
			$("col").value=''	
	}
	//键盘控制
	$("col").onkeydown=function(){
		if (event.keyCode==13) {
			var yanse=$("col").value;
			$("div").style.backgroundColor=yanse;
			$("col").value=''
		}
	}
//提交文字
	$("txt_btn").onclick=gameOpen;
	function gameOpen(){
		if ($("txt").value=='打地鼠') {
			var $dadishu=document.createElement('div');
			$dadishu.innerHTML='<button onclick="dadishu();">打地鼠</button>'
			$("div").appendChild($dadishu);
			$("txt").value='';
			return false
		}
		if ($("txt").value=='打飞机') {
			var $dafeiji=document.createElement('div');
			$dafeiji.innerHTML='<button onclick="dafeiji();">打飞机</button>'
			$("div").appendChild($dafeiji);
			$("txt").value='';
			return false
		}
		if ($("txt").value=='急速奔跑') {
			var $jisubenpao=document.createElement('div');
			$jisubenpao.innerHTML='<button onclick="jisubenpao();">急速奔跑</button>'
			$("div").appendChild($jisubenpao);
			$("txt").value='';
			return false
		}
		if ($("txt").value=='贪吃蛇') {
			var $tanchishe=document.createElement('div');
			$tanchishe.innerHTML='<button onclick="tanchishe();">贪吃蛇</button>'
			$("div").appendChild($tanchishe);
			$("txt").value='';
			return false
		}	
		if ($("txt").value=='小蜜蜂') {
			var $bee=document.createElement('div');
			$bee.innerHTML='<button onclick="bee();">小蜜蜂</button>'
			$("div").appendChild($bee);
			$("txt").value='';
			return false
		}
		if ($("txt").value=='打砖块') {
			var $dazhuankuai=document.createElement('div');
			$dazhuankuai.innerHTML='<button onclick="dazhuankuai();">打砖块</button>'
			$("div").appendChild($dazhuankuai);
			$("txt").value='';
			return false
		}
		if ($("txt").value=='游戏' || $("txt").value=='我想玩游戏' || $("txt").value=='小游戏') {
			var $dadishu=document.createElement('div');
			$dadishu.innerHTML='<button onclick="dadishu();">打地鼠</button>'
			$("div").appendChild($dadishu);
			
			var $dafeiji=document.createElement('div');
			$dafeiji.innerHTML='<button onclick="dafeiji();">打飞机</button>'
			$("div").appendChild($dafeiji);
			
			var $jisubenpao=document.createElement('div');
			$jisubenpao.innerHTML='<button onclick="jisubenpao();">急速奔跑</button>'
			$("div").appendChild($jisubenpao);
			
			var $tanchishe=document.createElement('div');
			$tanchishe.innerHTML='<button onclick="tanchishe();">贪吃蛇</button>'
			$("div").appendChild($tanchishe);
			
			var $bee=document.createElement('div');
			$bee.innerHTML='<button onclick="bee();">小蜜蜂</button>'
			$("div").appendChild($bee);
			
			var $dazhuankuai=document.createElement('div');
			$dazhuankuai.innerHTML='<button onclick="dazhuankuai();">打砖块</button>'
			$("div").appendChild($dazhuankuai);
								
			$("txt").value='';
			$("txt").disabled=true;	
			return false
		}
			var span=document.createElement('span');
			span.innerHTML=$("txt").value+"<br/>";
			$("div").appendChild(span);
			$("txt").value='';
	}
		//用键盘控制
	$("txt").onkeydown=function(){
		if (event.keyCode==13) {
			gameOpen();
		}		
	}
function dadishu () {
	alert('准备好开始“打地鼠”了吗?')
	window.open('打地鼠/打地鼠.html','打地鼠','width=1000,height=900,top=100px,left=300px')
}
function dafeiji () {
	alert('准备好开始“打飞机”了吗?')
	window.open('打飞机/打飞机.html','打飞机','width=1000,height=900,top=100px,left=300px')
}
function jisubenpao () {
	alert('游戏尚在开发中过段时间再来吧！')
//	window.open('###','打地鼠','width=1000,height=900,top=100px,left=300px')
}
function tanchishe () {
	alert('游戏尚在开发中过段时间再来吧！')
//	window.open('###','打地鼠','width=1000,height=900,top=100px,left=300px')
}
function bee () {
	alert('准备好开始“小蜜蜂”了吗?')
	window.open('Bee/This Bee.html','小蜜蜂','width=1000,height=900,top=100px,left=300px')
}
function dazhuankuai () {
	alert('准备好开始“打砖块”了吗?')
	window.open('canvas打砖块/index.html','打砖块','width=1000,height=900,top=100px,left=300px')
}
//添加背景图片
	$("back_img_btn").onclick=function(){
		var tupian=$("file").value;
		alert('您输入的图片为\n'+tupian);
		if (tupian.indexOf('.')!=-1) {
			$("div").style.backgroundImage='url('+tupian+')';
		} else{
			alert('图片位置不可用！！')
			alert('位置格式如下：\n ../../img/navbg3.jpg')
		}		
	}
//用键盘控制背景位置	
    	var y=0;
    	var x=0;
    	var i=0;
    	var gao=500;
    	var kuan=500;
    	var colors=['red','blue','darkcyan','#357D86','#204348','#CDDC39']
    document.onkeydown=xx;
    function xx(){
			//		W
		if(event.keyCode==87){
			gao=gao-20;
			$("div").style.height=gao+"px";
    	}     	
			//  	S
    	if (event.keyCode==83) {
    		gao=gao+20;
			$("div").style.height=gao+"px";
    	}
			//  	A
    	if (event.keyCode==65) {
    		kuan=kuan-20
			$("div").style.width=kuan+"px";
    	}
			//		D
    	if (event.keyCode==68) {
    		kuan=kuan+20
			$("div").style.width=kuan+"px";
    	}

//  	空格
    	if (event.keyCode==32) {
    		i++;
    		if(i>colors.length){
    			i=0;
    		}
    		$("div").style.backgroundColor=colors[i]
    	}
//  	上    	
    	if(event.keyCode==38){
			y=y-20;
			$("div").style.backgroundPositionY=y+'px';
    	}     	
//  	下
    	if (event.keyCode==40) {
			y=y+20;
			$("div").style.backgroundPositionY=y+'px';
    	}
//  	左
    	if (event.keyCode==37) {
			x=x-20;
			$("div").style.backgroundPositionX=x+'px';
    	}
//  	右
    	if (event.keyCode==39) {
			x=x+20;
			$("div").style.backgroundPositionX=x+'px';
    	}
    }
	function $(obj){return document.getElementById(obj);}
</script>